<template>
  <div class="home flex">
    <div class="menu">
      <MenuBar></MenuBar>
    </div>
    <div style="flex: 1;">
      <div class="nav">
        <NavBar></NavBar>
      </div>
      <div class="container">
        <router-view/>
      </div>
    </div>


  </div>
</template>

<script>
import MenuBar from '@/components/menuBar.vue';
import NavBar from '@/components/navBar.vue';

export default {
  name: 'Home',
  components: {
    MenuBar,
    NavBar
  },
  data() {
    return {
      form: {
        name: ''
      },
      list: [
        {
          id: 2,
          value: ''
        }
      ]
    }
  },
  methods: {

  },
  mounted() {
    console.log(this.$store.state);
    console.log(this.$store.state.a.name);
    this.$store.commit('a/setName', 'aa')
    console.log(this.$store.state.a.name);
  }
}
</script>
<style scoped lang="scss">
  .home{
    height: 100vh;
    overflow: hidden;
    .menu{
      height: 100%;
    }
    .nav{
      height: 50px;
    }
    .container{
      height: calc(100% - 50px);
      width: 100%;
      padding: 16px;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
</style>
